<template>
  <div>
    账号:
    <input type="text" v-model="formdata.username" name="" id="" />
    密码：
    <input type="text" v-model="formdata.password" name="" id="" />
    <button @click="handleSubmit">登陆</button>
  </div>
</template>

<script>
import axios from 'axios'
import { mapMutations } from 'vuex'
export default {
  data() {
    return {
      formdata: {
        username: '',
        password: '',
      },
    }
  },
  methods: {
    // 需求：进入页面，判断登陆权限
    // 1. 登陆页面将token存在vuex中，
    // 2. 其他页面如果要进入的话，要判断， 用户登陆过没有，如果没有登陆过，就跳入登陆页面登陆
    ...mapMutations(['set_token']),
    async handleSubmit() {
      const res = await axios.post('/api/login', this.formdata)
      console.log('res:', res.data.data.token)
      // 登陆成功之后，存储token.其他页面判断token在不在，在的话可以访问，不在的话，跳入登陆页面登陆
      // localStorage.setItem('token', res.data.data.token)
      this.set_token(res.data.data.token)
      this.$router.push('/about')
    },
  },
}
</script>

<style></style>
